<template>
	<view class="p-2 animated fast fadeIn">
		<!-- 昵称头像| 按钮 -->
		<view class="flex justify-between align-center">
			<!-- 左侧头像昵称 -->
			<view class="flex justify-center align-center">
				<!-- 头像 -->
				<image class="mr-1 rounded-circle" :src="item.userpic" style="width:80rpx;height: 80rpx;" @tap="optenSpace">
				</image>
				<!-- 昵称发布时间 -->
				<view>
					<view class="font " style="line-height: 1;">
						{{item.username}}
					</view>
					<text class="font-sm text-light-muted">
						{{item.newstime | format }}
					</text>
				</view>
			</view>
			<!-- 右侧关注按钮 -->
			<view class="flex justify-center align-center rounded text-white bg-main animated faster "
				hover-class="jello" style="width: 90rpx; height: 50rpx;" @click="follow" v-if="!item.isFollow && user.id !== item.user_id">
				<text>关注</text>
			</view>
		</view>
		<!-- 标题 -->
		<view class="font-md my-1" @click="optenDetail">
			{{item.title}}
		</view>
		<!-- 图片 -->
		<slot>
			<image :src="item.titlepic" v-if="item.titlepic" class="rounded w-100" mode="aspectFill" style="height: 350rpx;" @click="optenDetail">
			</image>
		</slot>

		<!-- 按钮|点赞分享等 -->
		<view class="flex justify-between align-center">
			<view class="flex flex-1 justify-center align-center animated faster" hover-class="rubberBand text-main"
				:class="item.support.type === 'support' ? 'support-active' : ''" @click="dosupport('support')">
				<text class="iconfont icon-dianzan2 m-2"></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : '赞'}}</text>
			</view>
			<view class="flex flex-1 justify-center align-center animated faster" hover-class="rubberBand text-main"
				:class="item.support.type === 'unsupport' ? 'support-active' : ''" @click="dosupport('unsupport')">
				<text class="iconfont icon-cai m-2"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text>
			</view>
			<view class="flex flex-1 justify-center align-center animated faster" hover-class="rubberBand text-main"
				@click="doComment">
				<text class="iconfont icon-pinglun2 m-2"></text>
				<text>{{item.comment_count > 0 ? item.comment_count : '评论' }}</text>
			</view>
			<view class="flex flex-1 justify-center align-center animated faster" hover-class="rubberBand text-main"
				@click="doShare">
				<text class="iconfont  icon-zhuanfa1 m-2"></text>
				<text>分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	import $T from '../../common/time.js'
	import { mapState } from 'vuex'
	export default {
		props: {
			item: Object,
			index: {
				type: Number,
				default: -1
			},
			isDetail: {
				type: Boolean,
				default: false
			}
		},
		filters: {
			format: function(value) {
				return $T.gettime(value);
			}
		},
		computed: {
			...mapState({
				user:state => state.userinfo
			})
		},
		methods: {
			//打开个人空间
			optenSpace() {
				this.navigateTo( {
					url: '/pages/user-space/user-space?user='+JSON.stringify(this.item),
				})
			},
			//关注
			follow() {
				this.checkAuth(() => {
					this.$H.post('/follow',{
						follow_id: this.item.user_id
					},{
						token:true,
						nactive:true
					}).then( res => {
						uni.$emit('updateFolloworSurpport',{
							type:'follow',
							user_id:this.item.user_id
						})
					})
				})

			},
			optenDetail() {
				if (this.isDetail) return;
				uni.navigateTo({
					url: '../../pages/detail/detail?detail=' + JSON.stringify(this.item),
				});
				let list = uni.getStorageSync('historylist')
				list = list ? JSON.parse(list) : []
				let index =list.findIndex( v => v.id === this.item.id)
				if(index === -1){
					list.unshift(this.item)
					uni.setStorageSync('historylist',JSON.stringify(list))
				}		
			},
			//评论
			doComment() {
				this.checkAuth(() => {
					if (!this.isDetail) {
						return this.optenDetail()
					}
					this.$emit('doComment')
				})

			},
			//分享
			doShare() {
				if (!this.isDetail) {
					return this.optenDetail()
				}
				this.$emit('doShare')
			},
			//点赞
			dosupport(type) {
				this.checkAuth(() => {
					this.$H.post('/support', {
						post_id: this.item.id,
						type: type === 'support' ? 0 : 1
					}, {
						token: true,
						nactive: true
					}).then(res => {
						if (res.data.errorCode) {
							return uni.showToast({
								title: '请勿重复操作',
								icon: 'none'
							});
						}
						uni.$emit('updateFolloworSurpport', {
							type: 'support',
							data: {
								type,
								id: this.item.id
							}
						})
					})
				})

			}
		}
	}
</script>

<style>
	.support-active {
		color: #FF4A6A;
	}
</style>
